import * as React from 'react';
import classNames from 'classnames';

interface BreadcrumbItemProps {
	children?: React.ReactNode;
	className?: string;
}

const BreadcrumbItem: React.FC<BreadcrumbItemProps> = props => {
	const prefixCls = 'bh-breadcrumb';
	const {
		children,
		className,
		...restProps
	} = props;
	const classString = classNames(
		prefixCls,
		className,
	);

	return (
		<span>
		    <span className="bh-breadcrumb-link">{children}</span>
		    <span className="bh-breadcrumb-separator">/</span>
		</span>
	)
};

export interface BreadcrumbProps extends React.FC<BreadcrumbItemProps> {
	Item: typeof BreadcrumbItem;
	children?: React.ReactNode;
	className?: string;
}

const BreadcrumbLayout: React.FC<BreadcrumbProps> = props => {
	const prefixCls = 'bh-breadcrumb';
	const {
		children,
		className,
		...restProps
	} = props;
	const classString = classNames(
		prefixCls,
		className,
	);

	return (
		<div {...restProps} className={classString}>
		    {children}
		</div>
	)
};

const Breadcrumb = BreadcrumbLayout as BreadcrumbProps;

Breadcrumb.Item = BreadcrumbItem;

export default Breadcrumb;